<template>
	<view class="container" v-if="isloding">
		<map :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloding:false,
				latitude: 0,
				longitude: 0,
				polyline: [{
					points: [{
						latitude: 0,
						longitude: 0
					}, {
						latitude: 0,
						longitude: 0
					}],
					color: "#ff6600",
					width: 2,
					dottedLine: true,
					arrowLine: true,
					borderColor: "#000",
					borderWidth: 2
				}],
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '../../../static/icon/qi.png'
				}, {
					latitude: 0,
					longitude: 0,
					iconPath: '../../../static/icon/zhong.png'
				}]

			}
		},
		onLoad(e) {
			this.latitude = JSON.parse(e.info).start_lat
			this.longitude = JSON.parse(e.info).start_lng
			this.polyline[0].points[0].latitude = JSON.parse(e.info).start_lat
			this.polyline[0].points[0].longitude = JSON.parse(e.info).start_lng
			this.polyline[0].points[1].latitude = JSON.parse(e.info).end_lat
			this.polyline[0].points[1].longitude = JSON.parse(e.info).end_lng
			this.covers[0].latitude = JSON.parse(e.info).start_lat
			this.covers[0].longitude = JSON.parse(e.info).start_lng
			this.covers[1].latitude = JSON.parse(e.info).end_lat
			this.covers[1].longitude = JSON.parse(e.info).end_lng
			this.isloding=true
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;

		map {
			width: 100%;
			height: 100%;
		}
	}
</style>
